<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>dataManagement</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for bootstrap inputs, input groups, custom checkboxes and radio controls and more"
          name="description" />
    <meta content="" name="author" />

    <link href="../../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../../assets/custom/css/iconfont.css" />

    <link href="../../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/bootstrap/css/bootstrap-theme.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../../assets/global/css/plugins.min.css" rel="stylesheet" type="text/css" />

    <link href="../../assets/global/plugins/jstree/dist/themes/default/style.min.css" rel="stylesheet" type="text/css">


    <link rel="stylesheet" href="../../assets/global/plugins/layui/css/layui.css" />
    <link rel="stylesheet" href="../../assets/custom/css/tabstyle.css" />
    <link rel="stylesheet" href="../../assets/custom/css/change_form.css" />
    <link rel="stylesheet" href="../../assets/custom/css/changeother.css" />
</head>

<body>

<div style="padding: 10px 10px 10px 20px;border-bottom: 1px solid #ddd;overflow: hidden">
    <h3 class="label_on fl margin-right-10 sub">标准体系:</h3>
    <div class="fl" style="width: 220px;">
        <select id="select2-single" class="form-control select2">
            <option value="AK">中心执行标准</option>
            <option value="HI">参考标准</option>
            <option value="HI">xxx公司标准</option>
        </select>
    </div>
</div>

<div class="contnet_wrap" style="height: calc(100% - 51px);">
    <div class="left_tree" style="top: 51px;">

        <h3 class="product-nav-title">分类方式</h3>
        <div class="product-nav-list">
            <div class="product-list-select">
                <select class="selectpicker bs-select form-control">
                    <option>分类方式一</option>
                    <option>分类方式二</option>
                </select>

            </div>

            <div class="left_tree_se margin-bottom-10">
                <input type="text" oninput onporpertychange id="plugins4_q" class="input-small input-inline">
                <i class="fa fa-search search-icon"></i>
            </div>

            <div id="tree_3"></div>
        </div>
    </div>
    <div class=" hFill right_tbale">
        <div class="portlet-body  hFill pon_relative">
            <div class="from_control clearfix">

                <div class="from_control_l">
                    <div class="data_search">
                        <span class="label_on margin-right-10 fl">关键字</span>
                        <input type="text" class="fa-search-input fl" id="query"/>
                        <button class="btn blue-hoki  fl search_btn" data-type="reload">搜索</button>
                    </div>

                    <div class="mt-checkbox-box">
                        <label class="mt-checkbox mt-checkbox-outline">显示子类目数据元 <input type="checkbox" value="1" name="filter" id="filter" checked="checked"> <span></span>
                        </label>
                    </div>
                </div>
                <div class="from_control_r">
                    <button class="btn blue-hoki addData">新增</button>
                    <button class="btn default">删除</button>
                </div>

            </div>
            <table id="dataManagement" lay-filter="test"></table>
        </div>
    </div>

</div>

<script type="text/html" id="barDemo">

    <a class="layui-btn  layui-btn-xs" lay-event="detail">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">调整所属类目</a>
</script>
<!--[if lt IE 9]>
<script src="../../assets/global/plugins/respond.min.js"></script>
<script src="../../assets/global/plugins/excanvas.min.js"></script>
<script src="../../assets/global/plugins/ie8.fix.min.js"></script>

<!-- BEGIN CORE PLUGINS -->
<script src="../../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>


<script src="../../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
<script src="../../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>

<script src="../../assets/global/scripts/app.min.js" type="text/javascript"></script>
<script src="../../assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>

<script src="../../assets/global/plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../../js/plugins/jsTree/jstree.search.js"></script>

<script src="../../assets/global/plugins/layui/layui.all.js"></script>

<script src="../../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
<script src="../../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>



<script>
    var results = [{id:"1",text:"分类方式一"},{id:"2",text:"分类方式二"},{id:"3",text:"分类方式三"}];
   
    //tree初始化
    $("#tree_3").jstree({
        core: {
            themes: {
                responsive: !1,
                "icons" : false,
                "dots" : false
            },
            check_callback: !0,
            'data' : function (obj, cb) {
                cb.call(this,getTreeArray(results));
            }
        },
        types: {
            "default": {
                icon: null
            },
            file: {
                //		icon: "fa fa-file icon-state-warning icon-lg"
            }
        },
        state: {
            key: "demo2"
        },
        plugins: ['wholerow','types',"search","contextmenu"],
        //-------------------------------------------------------------------------
        "contextmenu": {
            "items": function (node) {
                if(node.parent === "#"){return}

                var item = {
                    "rename":{
                        "separator_before"  : false,
                        "separator_after"   : false,
                        "_disabled"         : false, //(this.check("rename_node", data.reference, this.get_parent(data.reference), "")),
                        "label"             : "重命名",
                        "shortcut_label"    : 'F2',
                        "icon"              : "icon-note",
                        "action"            : function (data) {
                            var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);
                            inst.edit(obj);
                        }
                    },
                    "deletes":{
                        "separator_before"  : false,
                        "icon"              : false,
                        "separator_after"   : false,
                        "_disabled"         : false, //(this.check("delete_node", data.reference, this.get_parent(data.reference), "")),
                        "label"             : "删除",
                        "icon"              :"glyphicon glyphicon-trash",
                        "action"            : function (data) {
                            var inst = $.jstree.reference(data.reference),
                                obj = inst.get_node(data.reference);
                            if(inst.is_selected(obj)) {
                                inst.delete_node(inst.get_selected());
                            }
                            else {
                                inst.delete_node(obj);
                            }
                        },
                    }
                };

                return item;
            }
        }

    });
    var to = false;
    $('#plugins4_q').keyup(function () {
        if (to) {
            clearTimeout(to);
        }
        to = setTimeout(function () {
            var v = $('#plugins4_q').val();
            $('#tree_3').jstree(true).search(v);
        }, 250);
    });
    
    //得到tree数组
    function getTreeArray(result) {
        var arr = [];
        var obj = {
            "id": 8899,
            "parent": "#", //最上层父类id为 #
            "state": {"opened": true}, //默认展开所有
            "text": "分类方式",
        };
        arr.push(obj);
        for (var i = 0; i < result.length; i++) {
            var objSub = {
                "id": result[i].id,
                "parent":  8899, //最上层父类id为 #
                "state": {"opened": true}, //默认展开所有
                "text": result[i].text,
            };


            arr.push(objSub);
        }
        return arr;
    }
    
    //表格初始化
    layui.use('table', function(){
        var table = layui.table;

        //第一个实例
        table.render({
            elem: '#dataManagement'
            ,height: "full-116"
            ,url: '../layui_table.json' //数据接口
          //  ,page: true //开启分页
            ,cols: [[ //表头
                {type:'checkbox'}
                ,{field: 'id', title: 'ID'}
                ,{field: 'username', title: '数据元编码'}
                ,{field: 'sex', title: '数据元名称'}
                ,{field: 'city', title: '数据类型'}
                ,{field: 'score', title: '关联代码集'}
                ,{field: 'classify', title: '默认字段名'}
                ,{field:'dxflowId', width:180, align:'center', templet:'#barDemo',title:'操作'}
            ]]
        });

    });
    
    //点击新增页面
    $("button.addData").click(function () {
        layer.open({
            type:2,
            content:"dataAdd.html",
            area:["900px","600px"],
            btn : ["保存","关闭"]

        })
    })
</script>
</body>

</html>